<?xml version="1.0" encoding="UTF-8"?>
<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.prime.com.tr/ui" >

    <f:view>


        <h:head>
            <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
            <title>Vamos a Ordenar #{sessionScope.username}</title>
            <link type="text/css" rel="stylesheet" href="THEME/skin.css"/>
        </h:head>
        <h:body style="overflow: auto" >

            <p:layout fullPage="true">

                <p:layoutUnit position="center" collapsible="false" closable="false" header="Productos" scrollable="true">


                    <p:fieldset toggleable="false" legend="Seleccion">

                        <p:ajaxStatus style="width: 15px;height: 15px">
                            <f:facet name="start">
                                <h:graphicImage value="/images/loading.gif"/>
                            </f:facet>

                            <f:facet name="complete">
                                <h:outputText value=""/>
                            </f:facet>

                        </p:ajaxStatus>


                        <h:form>

                            <center>


                                <h:panelGrid columns="3">

                                    <p:commandButton ajax="true" action="#{ShowOrHideManagedBean.changePanels}" update="panelOrder" value="Combo Ensalada" style="width: 250px" image="ui-icon-key">

                                        <f:param name="action" value="comboEnsalada"/>

                                    </p:commandButton>

                                    <p:commandButton ajax="true" action="#{ShowOrHideManagedBean.changePanels}" update="panelOrder" value="Ensalada Solo" style="width: 250px" image="ui-icon-gear">

                                        <f:param name="action" value="ensaladaSolo"/>

                                    </p:commandButton>

                                    <p:commandButton ajax="true" action="#{ShowOrHideManagedBean.changePanels}" update="panelOrder" value="Bebidas" style="width: 250px" image="ui-icon-heart">

                                        <f:param name="action" value="bebidas"/>

                                    </p:commandButton>

                                    <p:commandButton ajax="true" action="#{ShowOrHideManagedBean.changePanels}" update="panelOrder" value="Combo Pasta" style="width: 250px" image="ui-icon-scissors">

                                        <f:param name="action" value="comboPasta"/>

                                    </p:commandButton>

                                    <p:commandButton ajax="true" action="#{ShowOrHideManagedBean.changePanels}" update="panelOrder" value="Pasta Solo" style="width: 250px" image="ui-icon-check">

                                        <f:param name="action" value="pastaSolo"/>

                                    </p:commandButton>

                                    <p:commandButton ajax="true" action="#{ShowOrHideManagedBean.changePanels}" update="panelOrder" value="Postre" style="width: 250px" image="ui-icon-script">

                                        <f:param name="action" value="postre"/>

                                    </p:commandButton>
                                </h:panelGrid>

                            </center>

                        </h:form>



                    </p:fieldset>


                    <p:panel id="panelOrder">


                        <h:form>


                            <p:fieldset  id="comboEnsalada" legend="Ensaladas" toggleable="false" rendered="#{ShowOrHideManagedBean.showComboEnsalada}" >

                                <p:tabView effect="opacity"  >

                                    <p:tab title="Sugerencias" >


                                        <h:form>

                                            <p:dataTable var="salads" value="#{SelectYourOrderManagedBean.fillSugerencias()}">

                                                <f:facet name="header">

                                                    <h:outputLabel value="Nombre Ensalada"/>

                                                </f:facet>

                                                <p:column selectionMode="single"/>

                                                <p:column headerText="Nombre Ensalada">
                                                    <h:outputLabel value="#{salads.name}"/>
                                                </p:column>

                                                <p:column headerText="Descripcion Ensalada">

                                                    <h:outputLabel value="#{salads.description}"/>

                                                </p:column>

                                            </p:dataTable>

                                        </h:form>

                                    </p:tab>


                                    <p:tab title="Creacion">


                                    </p:tab>


                                </p:tabView>

                                <p:effect event="load" type="puff">
                                        <f:param name="mode" value="'show'"/>
                                        <f:param name="percent" value="110"/>
                                    </p:effect>

                            </p:fieldset>


                            <p:fieldset legend="Pastas" toggleable="false" rendered="#{ShowOrHideManagedBean.showComboPasta}">

                                <h:panelGrid columns="2">

                                    <p:graphicText value="Tipo de Pasta:" fontName="Georgia" fontStyle="bold" fontSize="16"/>
                                    <h:selectOneRadio>

                                        <f:selectItem itemLabel="Rellena"/>
                                        <f:selectItem itemLabel="Sencilla"/>

                                    </h:selectOneRadio>


                                    <p:graphicText value="Tipo de Salsa:" fontName="Georgia" fontStyle="bold" fontSize="16"/>

                                    <h:selectOneRadio>

                                        <f:selectItem itemLabel="Salsa Roja"/>
                                        <f:selectItem itemLabel="Salsa Blanca"/>

                                    </h:selectOneRadio>



                                </h:panelGrid>

                                <p:effect event="load" type="puff">
                                    <f:param name="mode" value="'show'"/>
                                    <f:param name="percent" value="110"/>
                                </p:effect>





                            </p:fieldset>


                            <p:fieldset id="bebidas" legend="Bebidas" toggleable="false" rendered="#{ShowOrHideManagedBean.showBebidas}">

                                <h:panelGrid columns="2">

                                    <p:graphicText value="Bebidas Frias" fontName="Georgia" fontStyle="bold" fontSize="16"/>

                                    <h:selectOneRadio disabled="true">

                                        <f:selectItem itemLabel="Jugos Naturales"/>
                                        <f:selectItem itemLabel="Agua"/>
                                        <f:selectItem itemLabel="Refresco"/>
                                        <f:selectItem itemLabel="Refresco Light"/>


                                    </h:selectOneRadio>

                                </h:panelGrid>

                                <p:effect event="load" type="puff">
                                    <f:param name="mode" value="'show'"/>
                                    <f:param name="percent" value="110"/>
                                </p:effect>


                            </p:fieldset>

                            <p:fieldset id="postres" legend="Postres" toggleable="false" rendered="#{ShowOrHideManagedBean.showPostres}">


                                <h:panelGrid columns="2">

                                    <p:graphicText value="Postres Caseros" fontName="Georgia" fontStyle="bold" fontSize="16"/>
                                    <h:selectOneRadio disabled="true">

                                        <f:selectItem itemLabel="Cookies"/>
                                        <f:selectItem itemLabel="Muffins"/>
                                        <f:selectItem itemLabel="Crumbles"/>
                                        <f:selectItem itemLabel="Bizcochos"/>
                                        <f:selectItem itemLabel="Ensalada de Frutas"/>


                                    </h:selectOneRadio>

                                </h:panelGrid>

                                <p:effect event="load" type="puff">
                                    <f:param name="mode" value="'show'"/>
                                    <f:param name="percent" value="110"/>
                                </p:effect>




                            </p:fieldset>

                            <p:fieldset id="notas" legend="Otras Notas" toggleable="false" rendered="#{ShowOrHideManagedBean.showNotas}">

                                <h:panelGrid columns="1" >

                                    <h:outputText value="Notas de la Orden:"/>
                                    <h:inputTextarea cols="50" rows="5" disabled="true"/>


                                </h:panelGrid>

                                <p:effect event="load" type="puff">
                                    <f:param name="mode" value="'show'"/>
                                    <f:param name="percent" value="110"/>
                                </p:effect>


                            </p:fieldset>

                            <br/>

                            <p:commandButton ajax="true" value="Agregar a la Orden" action="#{SelectYourOrderManagedBean.goToSoloOrdering}" image="ui-icon-cart" style="position: absolute;right: 80px;width: 250px"/>

                        </h:form>


                    </p:panel>


                </p:layoutUnit>

                <p:layoutUnit position="right" closable="false" collapsible="true" header="Sumary" width="300">

                </p:layoutUnit>


            </p:layout>

        </h:body>

    </f:view>
</html>
